<script>
import {mapState} from "vuex";

export default {
  name: "navList",
  props: {
    navList: {
      type: Array,
      default: () => ([])
    }
  },
  methods: {
    /* 点击每一个分类项的回调函数 */
    handleClick(nav) {
      // 跳转到tabbar对应的页面
      if (nav.name !== "分类") return uni.showToast({title: "此功能还未开发", icon: "error", duration: 2000})
      uni.switchTab({url: "/pages/category/category"})
    }
  },
}
</script>

<template>
  <view class="navList">
    <view class="navItem" v-for="(nav,index) in navList" :key="index" @click="handleClick(nav)">
      <image class="icon" :src="nav.image_src"></image>
    </view>
  </view>
</template>

<style scoped lang="scss">
.navList {
  width: 100%;
  height: 160rpx;
  display: flex;
  justify-content: space-around;
  padding: 10px 0;

  .navItem {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    image {
      width: 150rpx;
      height: 150rpx;
    }
  }
}
</style>
